<template>

  <el-table
    :data="tableData"
    :row-class-name="tableRowClassName"
    :header-cell-style="{'text-align':'center','background-color':'#f8c3c3','color': '#000000','height': '80px'}"
    :cell-style="{'text-align':'center'}"
    border
    style="width: 100%"
  >
    <el-table-column
      prop="goodsName"
      label="商品名称"
      width="300"
    >
    </el-table-column>
    <el-table-column
      prop="goodsPrice"
      label="商品价格(元)"
      width="150"
    >
    </el-table-column>
    <el-table-column
      prop="goodsStock"
      label="库存"
      width="120"
    >
    </el-table-column>
    <el-table-column
      prop="goodsType"
      label="商品类型"
      width="150"
    >
    </el-table-column>
    <el-table-column
      prop="goodsContent"
      label="商品描述"
    >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="250"
    >
      <template slot-scope="scope">
        <el-button
          type="primary"
          @click="handleClick(scope.row)"
          size="mini"
        >查看</el-button>
        <el-button
          type="success"
          size="mini"
          @click="editGoods(scope.row)"
        >编辑</el-button>
        <el-popconfirm
          confirm-button-text='好的'
          cancel-button-text='不用了'
          icon="el-icon-info"
          icon-color="red"
          title="您确定要删除该条数据吗？"
          style="margin-left:12px"
          @onConfirm="delGoods(scope.row)"
        >
          <el-button
            type="danger"
            slot="reference"
            size="mini"
          >删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { delGoods } from '@/api/goods'
export default {
  props: {
    tableData: {
      type: Array,
      default: []
    }
  },
  methods: {
    /* 
      查看按钮点击
    */
    handleClick (row) {
      row.op = 'query'
      this.$router.push(`goodsMng/opGoods/${row.id}/${row.op}`)
    },
    /* 
      编辑按钮
    */
    editGoods (row) {
      row.op = 'edit'
      this.$router.push(`goodsMng/opGoods/${row.id}/${row.op}`)
    },
    /* 
      表格隔行变色  
    */
    tableRowClassName ({ row, rowIndex }) {
      return rowIndex % 2 == 0 ? 'warning-row' : 'success-row'
    },
    /* 删除按钮 */
    async delGoods (row) {
      await delGoods(row.id)
      this.$message({
        message: '删除成功',
        type: 'success'
      });
      this.$emit('getgoodslist')
    }
  }
}
</script>

<style>
/* -------------------------------- 表格隔行变色 */
.el-table .warning-row {
  background: oldlace !important;
}
.el-table .success-row {
  background: #e7e7e7 !important;
}
/* --------------------------------  end 表格隔行变色 */
</style>
